<template>
  <div class="shops-container">
    <div class="head-box">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" @change="onChange" indicator-color="white">
        <van-swipe-item v-for="(img, i) in imgList" :key="i">
          <img :src="img" />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ currentImg + 1 }}/3</div>
        </template>
      </van-swipe>

      <!-- 定位排序 -->
      <van-sticky>
        <div class="search-bar" v-show="!showSearch">
          <div class="position" @click="$router.push({ name: 'position' })">
            <van-icon name="location-o" />
            <span v-if="!positionMode">{{ location.address ? location.address : $t('h.shopsPage.posLoad') }}</span>
            <span v-if="positionMode">{{ changeLocation.address }}</span>
          </div>
          <div class="sort-search">
            <div class="sorting">
              <van-dropdown-menu active-color="#ffbf05" @dropdown-menu-height="'42px'">
                <van-dropdown-item v-model="sorting" :options="option" @change="$msg.toast('index' + sorting)" />
              </van-dropdown-menu>
            </div>
            <div class="search" @click="showSearch = true">
              <van-icon name="search" />
            </div>
          </div>
        </div>
        <div class="search-box" v-show="showSearch">
          <div class="esc-search" @click=";(showSearch = false), (keyword = '')">
            <van-icon name="revoke" />
          </div>
          <div class="search-input"><input v-model="keyword" placeholder="搜索商家" /></div>
        </div>
      </van-sticky>
    </div>

    <!-- 商家列表 -->
    <div class="shops">
      <div class="shops-list" v-for="item in showSearch && searchResult.length > 0 ? searchResult : shopsList" :key="item.id">
        <van-card :desc="item.description" :title="item.name" :thumb="item.picture_url" @click="selectShops(item)">
          <template #tags>
            <van-tag type="warning">{{ $t('h.shopsPage.delivery') }}</van-tag>
            <van-tag type="success">{{ $t('h.shopsPage.pickUp') }}</van-tag>
            <van-tag plain type="primary">1km</van-tag>
          </template>
        </van-card>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Shops',
  data() {
    return {
      sorting: 0,
      active: {},
      keyword: '',
      showSearch: false,
      option: [
        { text: this.$t('h.shopsPage.sort.def'), value: 0 },
        { text: this.$t('h.shopsPage.sort.praise'), value: 1 },
        { text: this.$t('h.shopsPage.sort.distance'), value: 2 }
      ],
      currentImg: 0,
      imgList: [require('../../../public/static/img/GoldenTea.jpeg'), require('../../../public/static/img/SeafoodCasserole.jpeg'), require('../../../public/static/img/MXBC.jpeg')]
    }
  },
  created() {
    // 初始化请求用户数据
    this.initUserInfo()
  },
  // 初始化定位
  mounted() {
    setTimeout(() => {
      this.$store.dispatch('getLocation')
    }, 600)
  },
  computed: {
    ...mapState({
      shopsList: state => state.home.shopsList,
      location: state => state.home.location,
      positionMode: state => state.home.positionMode,
      changeLocation: state => state.home.changeLocation
    }),
    // search result
    searchResult() {
      var list = this.shopsList
      var val = this.keyword
      var arr = []
      var resList = []
      if (!list.length) return
      list.forEach((item, i) => {
        var flag = item.name.toLowerCase().indexOf(val.toLowerCase())
        if (flag !== -1 && val !== '') {
          arr.push({
            num: flag,
            index: i
          })
        }
      })
      arr.sort((str1, str2) => {
        return str1.num - str2.num
      })
      arr.forEach(str => {
        resList.push(list[str.index])
      })
      return resList
    }
  },
  methods: {
    // 初始化请求用户数据、用户资产数据、商家数据
    initUserInfo() {
      this.$load.start()
      this.$store.dispatch('getUserinfo').then(msg => {
        if (msg) return this.$msg.danger(msg + 'info_err_1')
        this.$store.dispatch('getUserAssets').then(msg => {
          if (msg) return this.$msg.danger(msg + 'assets_err_2')
          this.$store.dispatch('getShopsList').then(msg => {
            if (msg) return this.$msg.danger(msg + 'list_err_3')
            this.$store.dispatch('getUserAddress').then(msg => {
              if (msg) return this.$msg.danger(msg + 'add_err_4')
              this.$load.done()
            })
          })
        })
      })
    },
    // 请求选择的当前店铺数据
    selectShops(item) {
      this.$load.start()
      var id = item.license_id.toString()
      var params = new URLSearchParams()
      params.set('license_id', id)

      this.$store.dispatch('getShopsConfig', params).then(msg => {
        if (msg) return this.$msg.danger(msg + ' Err_1')
        this.$store.dispatch('getMenuList', params).then(msg => {
          if (msg) return this.$msg.danger(msg + ' Err_2')
          this.$store.dispatch('getGoodsList', params).then(msg => {
            if (msg) return this.$msg.danger(msg + ' Err_3')
            sessionStorage.setItem('license_id', JSON.stringify(id))
            this.$store.commit('selectShops', item)
            this.$load.done()
            this.$emit('currentShops')
          })
        })
      })
    },
    // 轮播图
    onChange(index) {
      this.currentImg = index
    }
  }
}
</script>

<style lang="less" scoped>
.shops-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}

.head-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  z-index: 1;
  /deep/ .van-swipe__track {
    position: relative;
    width: 100%;
    height: 210px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  border-radius: 9.5px;
  background: rgba(0, 0, 0, 0.1);
}

.search-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 42px;
  background-color: white;
  box-shadow: 0px 2px 6px -3px #e0e0e0;
  .position {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 60%;
    height: 42px;
    margin-left: 0.6em;
    .van-icon-location-o {
      margin-right: 0.3em;
      font-size: 1.2em;
      font-weight: 800;
      color: #ffbf05;
    }
    span {
      width: 150px;
      font-size: 0.9em;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .sort-search {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 42px;
    right: 0;
    .sorting {
      position: relative;
      width: 50%;
      bottom: 50%;
      margin-right: 1.2em;
      /deep/ .van-dropdown-menu__bar {
        position: absolute;
        height: 42px;
        box-shadow: none;
        .van-ellipsis {
          color: #ffbf05;
        }
      }
      /deep/ .van-dropdown-item {
        max-width: 640px;
        width: 100%;
        margin: 0 auto;
      }
    }
    .search {
      .van-icon-search {
        font-size: 1.2em;
        font-weight: 800;
        color: #ffbf05;
      }
    }
  }
}
.search-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 42px;
  background-color: white;
  .esc-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12%;
    height: 80%;
    .van-icon-revoke {
      color: #ffbf05;
      font-size: 1.2em;
      font-weight: 800;
    }
  }
  .search-input {
    width: 80%;
    height: 75%;
    border-radius: 9px;
    padding: 0 1.5em;
    background-color: #f0f0f0;
    input {
      width: 100%;
      height: 100%;
      font-size: 0.9em;
    }
  }
}

.shops {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 0.55em;
  background-color: #ededed;
  .shops-list {
    width: 97%;
    .van-card {
      display: flex;
      align-items: center;
      border-radius: 9px;
      margin-top: 0.55em;
      background-color: white;
      .van-card__header {
        width: 100%;
        .van-card__title {
          font-size: 1.4em;
        }
        .van-card__desc {
          font-size: 1.1em;
          color: #ababab;
        }
        .van-tag--warning {
          position: relative;
          top: 33px;
          padding: 1px 6px;
          background-color: #ffbf05;
          border-radius: 3px;
        }
        .van-tag--success {
          position: relative;
          top: 33px;
          left: 0.33em;
          padding: 1px 6px;
          border-radius: 3px;
          background-color: #3cb371;
        }
        .van-tag--primary {
          position: absolute;
          right: 0;
          bottom: 0;
          padding: 1px 6px;
          border-radius: 9px;
          color: #b8b8b8;
        }
      }
    }
  }
}
</style>
